<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="user">
        <div class="userNav commenNav">
            <div>
                <div :class="{iconImg:isiconImg,iconImgs:isiconImgs}" @click="pillpage"></div>
                <div id="pillmanage" @click="pillpage" style="cursor: pointer">药品管理</div>
                <div class="breadcrum"></div>
                <div>新增药品</div>
            </div>
            <div class="userNavT">
                <div>
                    <input type="text" placeholder="输入药品名称开始搜索">
                    <div @click="searchfn"><img :src="searchImg" alt=""></div>
                </div>
            </div>
        </div>
        <div class="userCotent">
            <div class="basicInfo">
                <div>
                    <div><span style="float:left;color:#999;">基本信息</span><span :class="{colorRedFont:iscolorRedFont_1}" style="float:right">药品通用名称：</span></div>
                    <div>
                        <input maxlength="15" onkeyup="this.value=this.value.replace(/\s+/g,'')"  @keyup="keyboard_1" :class="{colorRedBorder:iscolorRedBorder_1}" v-model="pillname" type="text" style="width:320px;"></div>
                    <div v-show="warning_1" class="warnStyle">{{warn_1}}</div>
                </div>
                <div>
                    <div><span :class="{colorRedFont:iscolorRedFont_2}">药品有效期：</span></div>
                    <div>
                        <input maxlength="4"  @keyup="keyboard_2" :class="{colorRedBorder:iscolorRedBorder_2}" v-model="expiryDate" type="text" style="width:320px;">
                    </div>
                    <div v-show="warning_6" class="warnStyle">{{warn_6}}</div>
                </div>
                <div>
                    <div><span>药品有效期单位：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select v-model="selectDateunit" placeholder="请选择">
                                <el-option v-for="(option,index) in Dateunitoptions" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div>
                    <div><span>剂型：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select v-model="selectpillType" placeholder="请选择">
                                <el-option v-for="(option,index) in pillTypeoptions" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div>
                    <div><span :class="{colorRedFont:iscolorRedFont_3}">批准文号：</span></div>
                    <div><input maxlength="13" onkeyup="this.value=this.value.replace(/\s+/g,'')" @keyup="keyboard_3" :class="{colorRedBorder:iscolorRedBorder_3}" type="text" v-model="liceneNumber"></div>
                    <div v-show="warning_2" class="warnStyle">{{warn_2}}</div>
                </div>
                <div>
                    <div><span :class="{colorRedFont:iscolorRedFont_4,colorRedFont:iscolorRedFont_5}">批准文号有效期：</span></div>
                    <div>
                        <input maxlength="4" onkeyup="this.value=this.value.replace(/\s+/g,'')" @keyup="keyboard_4" :class="{colorRedBorder:iscolorRedBorder_4}" type="text" v-model="approvalNumValidity">
                        <span style="margin:0 10px;float:right;line-height: 32px;">月</span>
                    </div>
                    <div v-show="warning_5" class="warnStyle" style="float:left;">{{warn_5}}</div>
                </div>
                <div>
                    <div><span :class="{colorRedFont:iscolorRedFont_10}">生产地址：</span></div>
                    <div>
                        <div @click="keyboard_10" class="selectPickBox1" :class="{colorRedBorder:iscolorRedBorder_10}">
                            <el-select v-model="selectsite" placeholder="请选择">
                                <el-option v-for="(option,index) in site" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div v-show="warning_10" class="warnStyle" style="float:left;">{{warn_10}}</div>
                </div>
            </div>
            <div class="basicInfo pillrule">
                <div>
                    <div><span style="float:left;color:#999;">药品规格</span><span style="float:right">最小赋码包装单位：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select v-model="selectcodeUnit" placeholder="请选择">
                                <el-option v-for="(option,index) in codeUnit" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div>
                    <div><span :class="{colorRedFont:iscolorRedFont_6}">最小赋码包装内置剂数量：</span></div>
                    <div>
                        <input maxlength="5" @keyup="keyboard_6" type="text" v-model="minCodeNumber" :class="{colorRedBorder:iscolorRedBorder_6}"></div>
                    <div v-show="warning_7" class="warnStyle">{{warn_7}}</div>
                </div>
                <div>
                    <div><span>制剂单位：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select v-model="selectpillUnit" placeholder="请选择">
                                <el-option v-for="(option,index) in pillUnit" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div>
                    <div><span :class="{colorRedFont:iscolorRedFont_7}">制剂规格：</span></div>
                    <div><input maxlength="10" @keyup="keyboard_7" onkeyup="this.value=this.value.replace(/\s+/g,'')" type="text" v-model="specificationString" :class="{colorRedBorder:iscolorRedBorder_7}"></div>
                    <div v-show="warning_3" class="warnStyle">{{warn_3}}</div>
                </div>
                <div>
                    <div><span>包装级别：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select v-model="selectpackLevel" placeholder="请选择">
                                <el-option v-for="(option,index) in packLevel" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div>
                    <div><span :class="{colorRedFont:iscolorRedFont_8}">药品本位码：</span></div>
                    <div><input maxlength="20"  @keyup="keyboard_8" type="text" v-model="pillStandardCode" :class="{colorRedBorder:iscolorRedBorder_8}"></div>
                    <div v-show="warning_4" class="warnStyle">{{warn_4}}</div>
                </div>
            </div>
            <div>
                <input v-show="pilladd" type="button" value="保存" @click="pilladdBtn" :disabled='saveBtn'>
            </div>

        </div>
        <!--提示框-->
        <div id="tipMsg" v-show="istipMsg">
            <div class="approval-leave-bg">
                <div class="tipBox">
                    <div>
                        <p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
                    </div>
                    <div>
                        <p style="padding:40px 0;text-align: center;width:100%;">已编辑的内容未保存，确定进行其他操作？</p>
                        <div class="yesNo">
                            <input type="button" value="取消" id="yes" @click="cancle">
                            <input type="button" value="确定" id="no" @click="pillSure">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
import { mapActions } from 'vuex'
export default {
    name: 'user',
    data() {
        return {
            aa: '',
            warning_1: false,
            warn_1: '',
            warning_2: false,
            warn_2: '',
            warning_3: false,
            warn_3: '',
            warning_4: false,
            warn_4: '',
            warning_5: false,
            warn_5: '',
            warning_6: false,
            warn_6: '',
            warning_7: false,
            warn_7: '',
            warning_10: false,
            warn_10: '',
            iscolorRedFont_1: false,
            iscolorRedBorder_1: false,
            iscolorRedFont_2: false,
            iscolorRedBorder_2: false,
            iscolorRedFont_3: false,
            iscolorRedBorder_3: false,
            iscolorRedFont_4: false,
            iscolorRedBorder_4: false,
            iscolorRedFont_5: false,
            iscolorRedBorder_5: false,
            iscolorRedFont_6: false,
            iscolorRedBorder_6: false,
            iscolorRedFont_7: false,
            iscolorRedBorder_7: false,
            iscolorRedFont_8: false,
            iscolorRedBorder_8: false,
            iscolorRedFont_9: false,
            iscolorRedBorder_9: false,
            iscolorRedFont_10: false,
            iscolorRedBorder_10: false,
            toPath: '',
            istipMsg: false,
            intercept: false,
            pilladd: true,
            pilledit: false,
            pillStandardCode: '',
            specificationString: '',
            minCodeNumber: '',
            liceneNumber: '',
            // liceneEndTime: '',
            // liceneStartTime: '',
            pillname: '',
            expiryDate: '',
            approvalNumValidity:'',
            isiconImg: true,
            isiconImgs: false,
            searchImg: '/static/img/搜索.png',
            searchImgs: '/static/img/搜索点击.png',
            saveBtn:false,
            users: [
            ],
            // loading: true,
            selectDateunit: 'year',
            Dateunitoptions: [
                { text: '年', value: 'year' },
                { text: '月', value: 'month' },
                { text: '日', value: 'day' },
            ],
            selectpillType: '1',
            pillTypeoptions: [
                { text: '颗粒剂', value: '1' },
                { text: '片剂', value: '2' },
                { text: '胶囊剂', value: '3' },
                { text: '软胶囊剂', value: '4' },
                { text: '合剂', value: '5' },
                { text: '糖浆剂', value: '6' },
                { text: '注射剂', value: '7' },
                { text: '软膏剂', value: '8' },

                { text: '眼用制剂', value: '9' },
                { text: '鼻用制剂', value: '10' },
                { text: '栓剂', value: '11' },
                { text: '丸剂', value: '12' },
                { text: '乳膏剂', value: '13' },
                { text: '糊剂', value: '14' },
                { text: '吸入制剂', value: '15' },
                { text: '喷雾剂', value: '16' },
                { text: '气雾剂', value: '17' },
                { text: '凝胶剂', value: '18' },
                { text: '散剂', value: '19' },
                { text: '搽剂', value: '20' },
                { text: '涂剂', value: '21' },
                { text: '涂膜剂', value: '22' },
                { text: '酊剂', value: '23' },
                { text: '贴剂', value: '24' },
                { text: '贴膏剂', value: '25' },
                { text: '口服溶液剂', value: '26' },
                { text: '口服混悬剂', value: '27' },
                { text: '口服乳剂', value: '28' },
                { text: '植入剂', value: '29' },
                { text: '膜剂', value: '30' },
                { text: '耳用制剂', value: '31' },
                { text: '洗剂', value: '32' },
                { text: '冲洗剂', value: '33' },
                { text: '灌肠剂', value: '34' },
                { text: '锭剂', value: '35' },
                { text: '煎膏剂', value: '36' },
                { text: '胶剂', value: '37' },
                { text: '酒剂', value: '38' },
                { text: '膏药', value: '39' },
                { text: '露剂', value: '40' },
                { text: '茶剂', value: '41' },
                { text: '流浸膏剂与浸膏剂', value: '42' },
            ],
            selectsite: '1',
            site: [
                { text: '请选择', value: '1' },
            ],
            selectcodeUnit: '1',
            codeUnit: [
                { text: '盒', value: '1' },
                { text: '袋', value: '2' },
                { text: '箱', value: '3' },
            ],
            selectpillUnit: '1',
            pillUnit: [
                { text: '片', value: '1' },
                { text: '袋', value: '2' },
                { text: '粒', value: '3' },
                { text: '瓶', value: '4' },
                { text: '支', value: '5' },
            ],
            selectpackLevel: '1',
            packLevel: [
                { text: '1', value: '1' },
                { text: '2', value: '2' },
                { text: '3', value: '3' },
            ],
            produceAddresslist: [],

        }
    },
    filters: {

    },
    beforeRouteLeave(to, from, next) {
        this.toPath = to.path
        if (this.intercept == false) {
            this.istipMsg = true
        } else if (this.intercept == true) {
            this.istipMsg = false
            next()
        }
    },
    created: function () {
        // 获取生产地址
        this.produceAddresslist = JSON.parse(sessionStorage.ProduceAddress)
        for (let i = 0; i < this.produceAddresslist.length; i++) {
            this.site.push({ "text": this.produceAddresslist[i].address, "value": this.produceAddresslist[i].id })
        }
    },
    methods: {
        cancle: function () {
            this.istipMsg = false
        },
        // 提示框确定
        pillSure() {
            this.intercept = true
            var url = this.toPath
            this.$router.push({
                path: url
            })
        },
        pillpage: function () {
            this.isiconImg = false
            this.isiconImgs = true
            document.querySelector("#pillmanage").style.color = '#666'
            this.$router.push({
                path: '/home/pillmanage'
            })
        },
        searchfn: function () {
            this.searchImg = this.searchImgs
        },
        keyboard_1: function () {
            this.iscolorRedFont_1 = false
            this.iscolorRedBorder_1 = false
            this.warning_1 = false
        },
        keyboard_2: function () {
            this.iscolorRedFont_2 = false
            this.iscolorRedBorder_2 = false
            this.warning_6 = false
        },
        keyboard_3: function () {
            this.iscolorRedFont_3 = false
            this.iscolorRedBorder_3 = false
            this.warning_2 = false
        },
        keyboard_4: function () {
            this.iscolorRedFont_4 = false
            this.iscolorRedBorder_4 = false
            this.warning_5 = false
        },
        keyboard_5: function () {
            this.iscolorRedFont_5 = false
            this.iscolorRedBorder_5 = false
            this.warning_5 = false
        },
        keyboard_6: function () {
            this.iscolorRedFont_6 = false
            this.iscolorRedBorder_6 = false
            this.warning_7 = false
        },
        keyboard_7: function () {
            this.iscolorRedFont_7 = false
            this.iscolorRedBorder_7 = false
            this.warning_3 = false
        },
        keyboard_8: function () {
            this.iscolorRedFont_8 = false
            this.iscolorRedBorder_8 = false
            this.warning_4 = false
        },
         keyboard_10: function () {
            this.iscolorRedFont_10 = false
            this.iscolorRedBorder_10 = false
            this.warning_10 = false
        },
        panduan() {
            var a1, a2, a3, a4, a5, a6, a7, a8, obj
            obj = [a1, a2, a3, a4, a5, a6, a7, a8]
            console.log(this.pillname)
            if (this.pillname == null || this.pillname == "") {
                obj[0] = false
            }
            if (this.expiryDate == null || this.expiryDate == "") {
                obj[1] = false
            }
            if (this.liceneNumber == null || this.liceneNumber == "") {
                obj[2] = false
            }
            // if (this.liceneStartTime == null || this.liceneStartTime == "") {
            //     obj[3] = false
            // }
            // if (this.liceneEndTime == null || this.liceneEndTime == "") {
            //     obj[4] = false
            // }
            if (this.approvalNumValidity == null || this.approvalNumValidity == "") {
                obj[3] = false
            }
            if (this.minCodeNumber == null || this.minCodeNumber == "") {
                obj[5] = false
            }
            if (this.specificationString == null || this.specificationString == "") {
                obj[6] = false
            }
            if (this.pillStandardCode == null || this.pillStandardCode == "") {
                obj[7] = false
            }
            for (var i = 0; i < 8; i++) {
                if (obj[i] == false) {
                    let m = i + 1
                    this['iscolorRedFont_' + m] = true
                    this['iscolorRedBorder_' + m] = true
                }
            }
            console.log(obj)
            if (obj.indexOf(false) != -1) {
                return false
            }
            else {
                if(this.selectsite == '1'){
                    this.iscolorRedFont_10 = true
                    this.iscolorRedBorder_10 = true
                    this.warning_10 = true
                    this.warn_10 = '生产地址不能为空'
                    return false
                }
                var regs = new RegExp("[\u3000-\u303F\uFF00-\uFFEF\u3400-\u4DBF`~!@#$^&*()=|{}':;',\\[\\]<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%+_]+");
                var g =  /^[1-9]*[1-9][0-9]*$/;
                var b = /^[0-9a-zA-Z]*$/; 
                var a = /^[0-9]*[1-9][0-9]*$/;
                if (regs.test(this.pillname)) {
                    this.iscolorRedFont_1 = true
                    this.iscolorRedBorder_1 = true
                    this.warning_1 = true
                    this.warn_1 = '不能输入特殊字符'
                    return false
                }
                if(!g.test(this.expiryDate)){
                    this.iscolorRedFont_2 = true
                    this.iscolorRedBorder_2 = true
                    this.warning_6 = true
                    this.warn_6 = '请输入正整数'
                    return false
                }
                if(regs.test(this.liceneNumber)){
                    this.iscolorRedFont_3 = true
                    this.iscolorRedBorder_3 = true
                    this.warning_2 = true
                    this.warn_2 = '不能输入特殊字符'
                    return false
                }
                if(!g.test(this.approvalNumValidity)){
                    this.iscolorRedFont_4 = true
                    this.iscolorRedBorder_4 = true
                    this.warning_5 = true
                    this.warn_5 = '请输入正整数'
                    return false
                }
                if(!g.test(this.minCodeNumber)){
                    this.iscolorRedFont_6 = true
                    this.iscolorRedBorder_6 = true
                    this.warning_7 = true
                    this.warn_7 = '请输入正整数'
                    return false
                }
                
                if (regs.test(this.specificationString)) {
                    this.iscolorRedFont_7 = true
                    this.iscolorRedBorder_7 = true
                    this.warning_3 = true
                    this.warn_3 = '不能输入特殊字符'
                    return false
                }
                if(!a.test(this.pillStandardCode)){
                    this.iscolorRedFont_8 = true
                    this.iscolorRedBorder_8 = true
                    this.warning_4 = true
                    this.warn_4 = '只能输入数字'
                    return false
                }
                // if (this.liceneStartTime >= this.liceneEndTime) {
                //     this.iscolorRedFont_5 = true
                //     this.iscolorRedBorder_5 = true
                //     this.iscolorRedBorder_4 = true
                //     this.warning_5 = true
                //     this.warn_5 = '开始日期不能大于或者等于结束日期'
                //     return false
                // }
            }
        },
        // 请求格式化日期
        UnFormatDate(date) {
            var y, m, d, h, i
            var t = new Date(date)
            y = t.getFullYear()
            m = t.getMonth() + 1
            d = t.getDate()
            return y + '/' + (m < 10 ? '0' + m : m) + '/' + (d < 10 ? '0' + d : d)
        },
        pilladdBtn() {
            if (this.panduan() == false) {
                return
            } else {
                this.saveBtn = true;
                // #E74343
                var shuju = {
                    drugName: this.pillname,
                    // 药品有效期单位（字符串）
                    drugIndateUnit: this.selectDateunit,
                    //药品有效期(数值型)
                    drugIndate: Number(this.expiryDate),
                    // 剂型（字符串）
                    dosageForm: this.selectpillType,
                    // 生产地址ID（字符串）
                    produceAddressId: this.selectsite,
                    // 批准文号（字符串）
                    approvalNumber: this.liceneNumber,
                    // 批准文号有效期
                    approvalNumValidity: Number(this.approvalNumValidity),
                    // 最小赋码包装单位（字符串）
                    minPackagingUnit: this.selectcodeUnit,
                    // 最小赋码包装内制剂数量（数值型）
                    minPackagingNumber: Number(this.minCodeNumber),
                    // 制剂单位（字符串）
                    specificationUnit: this.selectpillUnit,
                    // 制剂规格（数值型）
                    specificationString: this.specificationString,
                    // 包装级别（数值型）
                    packingLevel: Number(this.selectpackLevel),
                    // 药品本位码（字符串）
                    drugCode: this.pillStandardCode,
                }
                this.pilladdBtnlist(shuju).then((data) => {
                    console.log(data, '新增药品')
                    if (data.code == 200) {
                        this.intercept = true
                        this.$router.push({
                            path: '/home/pillmanage'
                        })
                        this.$message.success('保存成功')
                    }else{
                        this.$message(data.message)
                    }
                    this.saveBtn = false;
                }).catch(msg => console.log(msg))
            }
        },
...mapActions(['getproducesitelist','pilladdBtnlist'])    
                                              }
                                          }

</script>
<style scoped>
    .userCotent {
        margin-top: 10px;
        /*min-width: 1289px;*/
        background: #fff;
        width:100%;
        height: calc(100vh - 150px);
        overflow-x: hidden;
        overflow-y: scroll;
    }
    
    .userCotent>div {
        padding: 30px 0 30px 40px;
        border-bottom: 1px solid #DDD;
    }
    
    .userCotent>div:nth-child(3) {
        border-bottom: none;
    }
    
    .userCotent>div>div>div {
        float: left
    }
    
    .userCotent input {
        width: 160px;
        height: 32px;
        border: 1px solid #DDD;
        border-radius: 5px;
    }
    
    .userNav>div:nth-child(1) {
        height: 25px;
        display: flex;
        margin-left: 35px;
        align-items: center;
    }
    
    .userNav>div:nth-child(1) input {
        background: #43dce7;
        border-radius: 5px;
        font-size: 14px;
        color: #fff;
        margin-left: 60px;
        width: 80px;
        height: 32px;
    }
    
    .userNav>div:nth-child(1) div {
        line-height: 25px;
        margin-left: 5px;
        padding: 0;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT {
        width: 360px;
        display: flex;
        align-items: center;
        margin-right: 45px;
    }
    
    .userNavT>div:nth-child(1) {
        display: flex;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        height: 34px;
        padding: 5px 10px;
        width: 360px;
        justify-content: space-between;
    }
    
    .userNavT>div:nth-child(1) input {
        border: none;
        outline: none;
        width: 100%;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT>div:nth-child(1) img {
        width: 20px;
        height: 20px;
    }
    
    .userNavT>div:nth-child(1) div {
        line-height: 25px;
        margin-left: 5px;
        padding: 0;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT>div:nth-child(1) div span {
        padding: 0!important;
    }
    
    .userNavT>div:nth-child(2) {
        color: #888;
        font-size: 14px;
        cursor: pointer;
    }
    
    .user {
        position: relative;
    }
    
    input::-webkit-input-placeholder {
        color: #CCCCCC;
        font-size: 14px
    }
    
    input:-moz-placeholder {
        color: #CCCCCC;
        font-size: 14px
    }
    
    input::-moz-placeholder {
        color: #CCCCCC;
        font-size: 14px
    }
    
    input:-ms-input-placeholder {
        color: #CCCCCC;
        font-size: 14px
    }
    
    .iconImg {
        background: url('/static/img/icons.png') no-repeat;
        width: 24px;
        height: 24px;
        background-position: -79px -39px;
    }
    
    .iconImgs {
        background: url('/static/img/icons.png') no-repeat;
        width: 24px;
        height: 24px;
        background-position: -108px -39px;
    }
    
    .datails {
        border: 1px solid #dddddd;
        width: 100%;
        background: #fff;
        min-width: 1289px;
    }
    
    .basicInfo>div {
        margin: 20px 0;
        overflow: hidden;
    }
    
    .basicInfo>div div:nth-child(1) {
        width: 280px;
        height: 32px;
        line-height: 32px;
    }
    
    .basicInfo>div div:nth-child(1) span {
        float: right;
        color: #333;
    }
    
    .basicInfo>div div:nth-child(2) input {
        padding: 0 10px;
        margin-left: 40px;
    }
    
    .userCotent>div:nth-child(3) input[type="button"] {
        width: 150px;
        color: #fff;
        background: #43dce7;
        border-radius: 5px;
        margin-left: 330px;
    }
    
    .el-input__inner {
        border: 1px solid #DDD!important;
    }
    
    select {
        width: 160px;
        border: 1px solid #DDD;
        height: 32px;
        border-radius: 5px;
        margin-left: 40px;
    }
    
    .breadcrum {
        background: url(/static/img/icons.png) no-repeat;
        width: 25px;
        height: 25px;
        background-position: -138px -39px;
    }
    
    .linumber_start {
        float: left;
        margin-left: 40px;
        overflow: hidden;
        height: 32px;
        border: 1px solid #DDD;
        border-radius: 5px;
        width: 160px!important;
    }
    
    .linumber_end {
        float: left;
        overflow: hidden;
        height: 32px;
        border: 1px solid #DDD;
        border-radius: 5px;
        width: 160px;
    }
    
    .colorRedBorder {
        border: 1px solid #E74343!important;
    }
    
    .colorRedFont {
        color: #E74343!important;
    }
    
    .warnStyle {
        line-height: 32px;
        margin-left: 10px;
        color: #E74343;
    }
    
    .selectPickBox1 {
        width: 160px!important;
    }
    
    .selectPickBox1 {
        height: 32px;
        overflow: hidden;
        position: relative;
        border: 1px solid #dddddd;
        border-radius: 5px;
        margin-left: 40px;
    }
    
    .selectPickBox1 .el-select {
        width: 162px!important;
        margin-left: -1px;
        margin-top: -1px;
    }
</style>